$("<div id='buttons'></div>").appendTo('.container ');
for (let i = 0; i < $('img').length; i++) {
    $("<span index='" + (i + 1) + "'></span>").appendTo('#buttons');
}
let i = 0;
let anite = false;
$('li').siblings().css('left', -600).siblings('.i').css('left', 0);

function go() {
    if (!anite) {
        anite = true;
        $('li').eq(i).animate({
            left: 600
        }, 1000);
        $('#buttons span').eq(i).css('backgroundColor', 'white');
        i++;
        if (i >= $('li').length) {
            i = 0;
        }
        $('li').eq(i).css('left', -400);
        $('#buttons span').eq(i).css('backgroundColor', 'orangered');
        $('li').eq(i).animate({
            left: 0
        }, 1000);
        $('li').promise().done(function() {
            anite = false;
        })
    }
}
let timer = setInterval(go, 1000);
$('.container ').hover(function() {
    clearInterval(timer);
}, function() {
    timer = setInterval(go, 1000);
})
$('.next').click(go);
$('.prev').click(function() {
    if (!anite) {
        anite = true;
        $('li').eq(i).animate({
            left: -600
        }, 1000)
        $('#buttons span').eq(i).css('backgroundColor', 'white');
        i--;
        if (i < 0) {
            i = $('li').length - 1;
        }
        $('li').eq(i).css('left', 600);
        $('#buttons span').eq(i).css('backgroundColor', 'orangered');
        $('li').eq(i).animate({
            left: 0
        }, 1000);

        $('li').promise().done(function() {
            anite = false;
        })
    }
})
for (let j = 0; j < $('img').length; j++) {
    $('#buttons span').eq(j).click(function() {
        $('#buttons span').eq(i).css('backgroundColor', 'white');
        $(this).css('backgroundColor', 'orangered');
        $('li').eq(i).css('left', -600);
        i = $(this).attr('index') - 1;
        $('li').eq(i).css('left', 0);
    })
}